<script setup lang="ts">
</script>

<template>
  <div class="estate">
    <img class="banner" src="https://public-oss-file.zmaxfilm.com/website-compress/cooperative-bg.png" alt="合作伙伴">
    <div class="main-wrap">
      <img class="image" src="https://public-oss-file.zmaxfilm.com/website-compress/cooperative-image-1.png" alt="">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.estate {
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 600;
  }

  .menu {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    background-color: #FAFAFA;

    .content {
      gap: 50px;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      .menu-item {
        height: 100%;
        display: flex;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        position: relative;
        align-items: center;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 100%;
          height: 2px;
          bottom: 0;
          transform-origin: center;
          background-color: var(--theme-color);
          transform: translateX(-50%) scaleX(0);
          transition: transform 0.4s ease;
        }

        &:hover::after,
        &.menu-item--active::after {
          transform: translateX(-50%) scaleX(1);
        }
      }
    }
  }

  .main-wrap {
    margin-top: 60px;
    background-color: #fff;

    .image {
      height: 717px;
    }
  }
}
</style>
